<template>
  <div class="game-timer-container">
    <div class="timer-display">
      <div class="timer-circle">
        <svg class="timer-svg" viewBox="0 0 120 120">
          <!-- 背景圆环 -->
          <circle
            cx="60"
            cy="60"
            r="54"
            fill="none"
            stroke="#f0f0f0"
            stroke-width="8"
          />
          <!-- 进度圆环 -->
          <circle
            cx="60"
            cy="60"
            r="54"
            fill="none"
            :stroke="timerColor"
            stroke-width="8"
            stroke-linecap="round"
            :stroke-dasharray="circumference"
            :stroke-dashoffset="strokeDashoffset"
            transform="rotate(-90 60 60)"
          />
        </svg>
        
        <div class="timer-text">
          <div class="time-display">{{ formattedTime }}</div>
          <div class="phase-display">{{ phaseText }}</div>
        </div>
      </div>
    </div>
    
    <!-- 游戏阶段指示器 -->
    <div class="phase-indicators">
      <div 
        v-for="(phase, index) in gamePhases" 
        :key="phase.name"
        class="phase-indicator"
        :class="{ 
          'active': currentPhaseIndex === index,
          'completed': index < currentPhaseIndex
        }"
      >
        <div class="phase-dot"></div>
        <span class="phase-name">{{ phase.name }}</span>
      </div>
    </div>
    
    <!-- 倒计时提示 -->
    <div v-if="showCountdown" class="countdown-overlay">
      <div class="countdown-number">{{ countdownNumber }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
import { useGameStore } from '@/stores/game'

const props = defineProps({
  duration: {
    type: Number,
    default: 180 // 3分钟
  }
})

const gameStore = useGameStore()

// 状态
const countdownNumber = ref(3)
const showCountdown = ref(false)

// 游戏阶段配置
const gamePhases = [
  { name: '准备', duration: 30, color: '#1890ff' },
  { name: '游戏', duration: 180, color: '#52c41a' },
  { name: '结算', duration: 30, color: '#faad14' }
]

// 计算属性
const timeLeft = computed(() => Number(gameStore.timeLeft || 0))
const gameStatus = computed(() => gameStore.gameStatus)

const currentPhase = computed(() => {
  if (gameStatus.value === 'waiting') return gamePhases[0]
  if (gameStatus.value === 'playing') return gamePhases[1]
  if (gameStatus.value === 'finished') return gamePhases[2]
  return gamePhases[0]
})

const currentPhaseIndex = computed(() => {
  if (gameStatus.value === 'waiting') return 0
  if (gameStatus.value === 'playing') return 1
  if (gameStatus.value === 'finished') return 2
  return 0
})

const phaseText = computed(() => currentPhase.value.name)

const timerColor = computed(() => {
  if (timeLeft.value > 60) return '#52c41a'
  if (timeLeft.value > 30) return '#faad14'
  return '#ff4d4f'
})

const circumference = computed(() => 2 * Math.PI * 54)

const strokeDashoffset = computed(() => {
  const totalTime = gameStatus.value === 'playing'
    ? Number(gameStore.gameDuration || currentPhase.value.duration)
    : currentPhase.value.duration
  const remaining = Math.max(0, Math.min(timeLeft.value, totalTime))
  const progress = totalTime > 0 ? remaining / totalTime : 0
  return circumference.value * (1 - progress)
})

const formattedTime = computed(() => {
  const minutes = Math.floor(timeLeft.value / 60)
  const seconds = timeLeft.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

// 监听游戏状态变化
watch(gameStatus, (newStatus, oldStatus) => {
  if (newStatus === 'playing' && oldStatus === 'waiting') {
    showGameStartCountdown()
  }
})

// 显示游戏开始倒计时
function showGameStartCountdown() {
  showCountdown.value = true
  countdownNumber.value = 3
  
  const countdownInterval = setInterval(() => {
    countdownNumber.value--
    
    if (countdownNumber.value <= 0) {
      clearInterval(countdownInterval)
      showCountdown.value = false
    }
  }, 1000)
}

// 移除对currentPhaseIndex的写操作（它是computed）
</script>

<style scoped>
.game-timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.timer-display {
  position: relative;
}

.timer-circle {
  position: relative;
  width: 120px;
  height: 120px;
}

.timer-svg {
  width: 100%;
  height: 100%;
}

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.time-display {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.phase-display {
  font-size: 14px;
  color: #666;
}

.phase-indicators {
  display: flex;
  gap: 20px;
}

.phase-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.phase-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9d9d9;
  transition: all 0.3s ease;
}

.phase-indicator.active .phase-dot {
  background: #1890ff;
  transform: scale(1.2);
}

.phase-indicator.completed .phase-dot {
  background: #52c41a;
}

.phase-name {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.phase-indicator.active .phase-name {
  color: #1890ff;
  font-weight: 600;
}

.countdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.countdown-number {
  font-size: 120px;
  font-weight: bold;
  color: white;
  animation: countdownPulse 1s ease-in-out;
}

@keyframes countdownPulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .game-timer-container {
    padding: 15px;
  }
  
  .timer-circle {
    width: 100px;
    height: 100px;
  }
  
  .time-display {
    font-size: 20px;
  }
  
  .phase-indicators {
    gap: 15px;
  }
  
  .countdown-number {
    font-size: 80px;
  }
}
</style>
